import React, { useEffect, useState } from "react";
import '../../appcommon.css';
import styles from './invite.module.css';
import { useDispatch } from "react-redux";
import { DotLoading, Mask, Toast } from "antd-mobile";
import { saveEvent } from "@/store/actions/saveEvent";
import icon_invite_large from '@/assets/icon_invite_large.png'
import icon_share_fill from '@/assets/icon_share_fill.png'

import NavigateBar from "@/components/NavigateBar";
import { getMyInviteInfo } from "@/store/actions/user";
import { toCopyText, toPercentageString } from "@/utils/utils";
import { LangEn } from "@/utils/langEn";

/**
 * 登录页
 */
export default function Invite() {

    //loading状态
    const [maskVisible, setMaskVisible] = useState(false)

    //显示add home弹框
    const [addHomeMaskVisible, setAddHomeMaskVisible] = useState(false);
    const [addHomeMaskIsHomeMode, setAddHomeMaskIsHomeMode] = useState(true);

    // 当前币
    const [curInviteInfo, setCurInviteInfo] = useState({});

    // 文案翻译
    const [curLang, setCurLang] = useState(LangEn);

    // 获取 Redux 分发器
    const dispatch = useDispatch()

    //router

    //清空登录信息
    useEffect(() => {
        //关闭loading
        setMaskVisible(false)

        // 获取用户邀请信息
        doGetMyInviteInfo()

        //打点
        doHitEvent("INVITE_START")

        return () => {
            //打点
            doHitEvent("INVITE_END")
        }
    }, [])

    //打点接口
    const doHitEvent = async (type, remark = "") => {
        console.log("doHitEvent: " + type + " , " + remark);

        try {
            //获取Action
            const action = saveEvent(type, remark)

            //触发接口
            await dispatch(action)

        } catch (e) {
            console.log(e)
        }
    }

    // 点击 复制
    const onHandleLinkCopy = () => {
        let link = curInviteInfo.shareLink;
        console.log(link);
        toCopyText(link);
    }

    // 点击 分享
    const onHandleLinkShare = () => {
        // Toast.show("Share success");

        let body = curLang.inviteShareBody;
        let link = curInviteInfo.shareLink;
        let content = body + "\n\n" + link;
        console.log(content);

        if (navigator.share) {
            navigator.share({
                title: 'CMC Wallet',
                text: content,
                url: ''
            })
        } else {
            // console.log('该浏览器不支持系统分享');
            Toast.show(curLang.inviteNotSupportTips);
        }
    }

    // 获取用户邀请信息 返回
    const onDoGetMyInviteInfoCallback = (success, data) => {
        //关闭loading
        setMaskVisible(false)
        console.log('获取用户邀请信息 返回: ' + success);

        if (success && data) {
            // 处理流程业务
            let inviteCode = data.inviteCode || "";
            let incomeRate = data.incomeRate || "";
            let shareLink = "https://www.rawwallet.net/nigeria?referrer=" + inviteCode;

            data.inviteCode = inviteCode;
            data.incomeRate = toPercentageString(incomeRate);
            data.shareLink = shareLink;

            setCurInviteInfo(data);
        }
    };


    // 获取用户邀请信息
    const doGetMyInviteInfo = async () => {
        console.log("doGetMyInviteInfo: ");

        try {
            //显示loading
            setMaskVisible(true)

            //获取Action
            const action = getMyInviteInfo(onDoGetMyInviteInfoCallback)

            //触发接口
            await dispatch(action)

        } catch (e) {
            console.log(e)
        }
    }


    return (
        <div className='pageRoot'>
            <NavigateBar theme="white" showLogout={false} onAddFavorite={() => { setAddHomeMaskIsHomeMode(false); setAddHomeMaskVisible(true) }} onAddHome={() => { setAddHomeMaskIsHomeMode(true); setAddHomeMaskVisible(true) }}>{curLang.inviteInvite}</NavigateBar>

            {/* 使用添加 home screen bar */}
            {/* <AddFavorite onAddHome={() => { setAddHomeMaskIsHomeMode(true); setAddHomeMaskVisible(true) }} /> */}

            <div className="pageContentColumnFull pageContentPaddingHorizontal16px pageMarginTop16px">
                {/* qr code 模块 */}
                <div className={styles.inviteTopFrame}>
                    <img className={styles.inviteTopIcon} alt="" src={icon_invite_large} />
                    <div className={styles.inviteTopTips}>{curLang.inviteTips1}</div>
                    <div className={styles.inviteTopTips}>{curLang.inviteTips2}</div>
                    <div className={styles.inviteTopRate}>
                        <div className={styles.inviteTopTipsRate}>{curInviteInfo.incomeRate}</div>
                        <div className={styles.inviteTopTipsRateDesc}>{curLang.inviteTips3}</div>
                    </div>
                </div>

                {/* 复制 */}
                <div className={styles.inviteActionFrame}>
                    <div className={styles.inviteActionTitle}>{curLang.inviteYourInvitationLink}</div>
                    <div className={styles.inviteActionValue}>{curInviteInfo.shareLink}</div>

                    <div className={styles.inviteAction} onClick={onHandleLinkCopy}>
                        <div className={styles.inviteActionTarget}>{curLang.inviteCopyLink}</div>
                    </div>
                </div>

                {/* 分享 */}
                <div className={styles.inviteActionFrame}>
                    <div className={styles.inviteActionTitle}>{curLang.inviteShareToSocialMedia}</div>

                    <div className={styles.inviteAction} onClick={onHandleLinkShare}>
                        <img className={styles.inviteShareIcon} alt="" src={icon_share_fill} />
                        <div className={styles.inviteActionTarget}>{curLang.inviteShareToSocialMedia}</div>
                    </div>
                </div>
            </div>

            {/* 底部 margin */}
            <div className="pageBottomEdge"></div>

            {/* load mask */}
            <Mask visible={maskVisible} opacity={0.1}
                onMaskClick={() => { }}>
                <div className="pageLoadingOverlayContent">
                    <span style={{ fontSize: 24, color: '#3498DB' }} >
                        <DotLoading color="currentColor" />
                    </span>
                </div>
            </Mask>
        </div >
    )
}